<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>


    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">用户数据</div>
                <div class="layui-card-body">
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>

        </div>

    </div>


</body>
<script src="../layui/layui.all.js"></script>
<script>
    (function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo',
            height: 400,
            url: '../data/userData.json' //数据接口
                ,
            page: true //开启分页
                ,
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        fixed: 'left'
                    }, {
                        field: 'username',
                        title: '用户名',
                        width: 80,
                        edit: true
                    }, {
                        field: 'sex',
                        title: '性别',
                        width: 80,
                        sort: true
                    }, {
                        field: 'city',
                        title: '城市',
                        width: 80
                    }, {
                        field: 'sign',
                        title: '签名',
                        width: 177
                    }, {
                        field: 'experience',
                        title: '积分',
                        width: 80,
                        sort: true
                    }, {
                        field: 'score',
                        title: '评分',
                        width: 80,
                        sort: true
                    }, {
                        field: 'classify',
                        title: '职业',
                        width: 80
                    }, {
                        field: 'wealth',
                        title: '财富',
                        width: 135,
                        sort: true
                    }
                ]
            ]
        });


    })();
</script>

</html>